<template>
  <div>
    <el-date-picker
        v-model="date" type="date" value-format="yyyy-MM-dd" @change="changeDate" placeholder="选择日期">
    </el-date-picker>

    <el-row style="margin: 100px 0">
      <el-table :data="tableData" border :header-cell-style="{ background: 'aliceblue', fontSize: '16px' }">
        <el-table-column label="序号" prop="id" align="center"></el-table-column>
        <el-table-column label="名称" prop="name" align="center"></el-table-column>
        <el-table-column label="年龄" prop="age" align="center"></el-table-column>
        <el-table-column label="地址" prop="address" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'Element',
  data() {
    return {
      date: '',
      tableData: [
        { id: 1, name:'2', age: '3', address:'4'},
        { id: 1, name:'2', age: '3', address:'4'},
        { id: 1, name:'2', age: '3', address:'4'},
        { id: 1, name:'2', age: '3', address:'4'},
        { id: 1, name:'2', age: '3', address:'4'},
      ],
    }
  },
  methods: {
    changeDate(){
      console.log(this.date);
    },
    edit(row){
      this.$confirm('这是什么个玩意儿？', '提示', {
        type: 'warning'
      }).then(res => {
        this.$message.success("ok 我点击了确认")
      }).catch(() => {
        this.$message.warning("ok 我点击了取消")
      })
    }
  }
}

</script>